Tasks toolbar redesign: tokenized search, filter dropdown, first-class Select/Delete verbs#3748
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Rebuilds the Tasks list command bar to match the redesign handoff, introducing a tokenized search field, a grouped-dimension filter dropdown, and first-class multi-select/delete toolbar verbs while keeping the underlying task filtering semantics (cardMatchesBoardSearch) intact.
Changes:
- Replaces the legacy Tasks header search with a new tokenized
BoardTokenSearchcomponent and updated toolbar chrome styles. - Adds a new
BoardFilterMenuto narrow the task list by status/project via excluded-set filters applied inBoardView’sfilteredmemo. - Updates existing source-scan/style/tests to match the new markup and toolbar behavior, and banks a small design-token-drift spacing reduction.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/board/chrome-table.css | Restyles the Tasks toolbar (new layout, token-search, filter menu, select/delete verbs) and adds supporting popover/menu styles. |
| src/lib/design-token-drift.test.ts | Updates the off-scale spacing baseline to reflect the toolbar chrome changes. |
| src/lib/board-search.test.ts | Updates source-scan assertions to reflect the extracted token-search component. |
| src/components/board-view.tsx | Wires in BoardTokenSearch, BoardFilterMenu, excluded-set filtering, and first-class select/delete toolbar verbs. |
| src/components/board-view-familiar-scope.test.ts | Updates memo dependency pinning for the redesigned filtering dependencies. |
| src/components/board-ux-polish.test.ts | Updates CSS source pins for the new token-search selectors and mobile touch-target rules. |
| src/components/board-token-search.tsx | Adds the new tokenized key:value search UI that composes into the existing query string format. |
| src/components/board-filter-menu.tsx | Adds the new status/project checklist dropdown used by BoardView. |
| src/components/board-bulk-select.test.ts | Updates select-mode assertions to match the redesigned toolbar entry points. |
| src/app/composer-zoom-smoke.test.ts | Updates the iOS anti-zoom selector allowlist to include the new search input class. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+328
to
+335
| const projectLabelOf = useCallback((c: Card): string => { | ||
| if (c.projectId) { | ||
| const p = chatProjectById(c.projectId, projects); | ||
| if (p?.name) return p.name; | ||
| } | ||
| if (c.cwd) return c.cwd.split("/").filter(Boolean).pop() ?? c.cwd; | ||
| return "No project"; | ||
| }, [projects]); |
| .board-confirm-title { font-size:13px; font-weight:600; color:var(--text-primary); } | ||
| .board-confirm-desc { font-size:12px; color:var(--text-secondary); margin-top:5px; line-height:1.5; } | ||
| .board-confirm-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; } | ||
| .board-confirm-delete { height:30px; padding:0 13px; background:var(--color-danger); border:0; border-radius:5px; color:#fff; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:filter .12s; } |
| .board-filter-item--mono { font-family:var(--font-mono); font-size:12px; } | ||
| .board-filter-item:hover { background:var(--bg-hover); color:var(--text-primary); } | ||
| .board-filter-check { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:4px; flex-shrink:0; border:1px solid var(--border-strong); color:transparent; transition:background .12s,border-color .12s; } | ||
| .board-filter-check--on { background:var(--accent-presence); border-color:var(--accent-presence); color:var(--primary-foreground); } |
Comment on lines
+189
to
+193
| {showSuggest ? ( | ||
| <div className="board-token-suggest" role="listbox" aria-label="Search suggestions"> | ||
| <div className="board-token-suggest-label">{suggestions.label}</div> | ||
| {suggestions.items.map((opt) => ( | ||
| <button key={opt.tag} type="button" className="board-token-suggest-item" onClick={opt.onPick}> |
Comment on lines
+35
to
+52
| return ( | ||
| <div className="board-filter"> | ||
| {open ? <div className="board-filter-scrim" onClick={() => setOpen(false)} /> : null} | ||
| <button | ||
| type="button" | ||
| className={`board-filter-btn${hasFilters ? " board-filter-btn--active" : ""}`} | ||
| onClick={() => setOpen((o) => !o)} | ||
| aria-expanded={open} | ||
| aria-haspopup="true" | ||
| > | ||
| <Icon name="ph:funnel" width={14} /> | ||
| Filter | ||
| {hasFilters ? <span className="board-filter-count">{activeCount}</span> : null} | ||
| <Icon name="ph:caret-down" width={11} className={`board-filter-caret${open ? " board-filter-caret--open" : ""}`} /> | ||
| </button> | ||
| {open ? ( | ||
| <div className="board-filter-menu" role="menu"> | ||
| <div className="board-filter-menu-head"> |
…ass verbs (tasks-list-redesign-refresh) Implements the Tasks.dc.html handoff (claude.ai/design). The List/Board/Gantt views and the inspector drawer already realized the design's Coven-derived language; the transformative gap was the command bar, now rebuilt to match: - Roomier 63px toolbar: 16px title, bordered segment groups for grouping (Status/Familiar/Project) and view (Board/List/Gantt), primary New task. - Tokenized search (new `BoardTokenSearch`): committed `key:value` filters render as mono chips with a typeahead popover (is/priority/status/familiar/ cwd/url), backspace-to-remove, `/` focus hint. Composes into the same query string `cardMatchesBoardSearch` already parses — no filter-logic change. - Filter dropdown (new `BoardFilterMenu`): status/project checklist that narrows by the grouped dimension; modelled as excluded-sets so new statuses/projects default visible. Applied in the `filtered` memo. - Select-multiple and Delete-selected are now visible toolbar verbs (with a live count badge + inline delete-confirm popover) instead of overflow items; the overflow keeps the occasional Clear-done. Selection engine (useMultiSelect), undo-delete, polling, lifecycle, and bulk actions are all unchanged. Verified in the running app (demo mode): toolbar, chip typeahead, filter menu, List/Gantt/inspector all render clean with no console errors. Tests: updated the source-scan pins that referenced the old `.board-search-*` markup (board-search, board-bulk-select, board-ux-polish, board-view-familiar- scope, composer-zoom anti-zoom list) to follow the extraction; banked the −2 off-scale spacing the compact-header removal freed (design-token-drift baseline). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ast pair The redesign makes New task a --primary CTA (Coven design language: accent is presence, not the CTA colour). Update the accent-filled-button contrast contract to enforce --primary paired with its designed --primary-foreground token — preserving the AA guarantee the test protects while matching the design. Fixes the Frontend build (pnpm test:app) failure on a11y-audit-fixes.test.ts. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ush) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
BunsDev
force-pushed
the
feat/tasks-list-redesign-refresh
branch
2 times, most recently
from
July 24, 2026 05:42
c3544f1 to
52685cc
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements the Tasks list redesign refresh handoff (
Tasks.dc.html, from claude.ai/design).What changed
The existing List/Board/Gantt views and the inspector drawer already realized the design's Coven-derived visual language (shared tokens/primitives). The one transformative gap was the command bar, which this PR rebuilds to match the design:
board-token-search.tsx. Committedkey:valuefilters render as mono chips inside the field, with a typeahead popover for the vocabulary (is,priority,status,familiar,cwd,url), backspace-to-remove, and the/focus hint. It composes into the same query stringcardMatchesBoardSearchalready parses — no change to filter logic.board-filter-menu.tsx. A status/project checklist that narrows by the grouped dimension, modelled as excluded-sets so newly-appearing statuses/projects default to visible. Applied in thefilteredmemo.The rich existing wiring is untouched:
useMultiSelectselection, undo-delete, background polling, lifecycle, harness recovery, and all bulk actions behave exactly as before.Verification
Driven in the running app (prod build, demo mode) with Playwright — screenshots confirm the toolbar, chip typeahead popover, filter menu, and the List/Gantt/inspector surfaces all render cleanly with no console errors.
Tests
Updated the source-scan pins that referenced the old
.board-search-*markup to follow the component extraction:board-search,board-bulk-select,board-ux-polish,board-view-familiar-scope, and thecomposer-zoomiOS anti-zoom selector list (new input is 16px on touch, 13.5px only under@media (pointer: fine)). Banked the −2 off-scale spacing that removing the compact header freed (design-token-driftbaseline). tsc + lint (codemod:design:check+ eslint) + all 23 board tests + drift gate green locally.🤖 Generated with Claude Code